<template>
  <div class="focusTitle">关注列表</div>
  <div>
    <HalfTable :columns="focusColumns"
           :showPagination="true"
           :dataSource="focusData"
           :fetch="loadFocusList"
           :options="focusOptions">
      <template #opration="{row}">
        <div class="opration">
          <a href="javascript:void(0)"
             class="a-link"
             @click="del(row)">取关</a>
        </div>
      </template>
    </HalfTable>
    <div class="followTitle">粉丝列表</div>
    <HalfTable :columns="followColumns"
           :showPagination="true"
           :dataSource="followsData"
           :fetch="loadFollowsList"
           :options="followOptions">
    </HalfTable>
  </div>
</template>

<script>
import { columns } from 'element-plus/es/components/table-v2/src/common.mjs';
import { handleCurrentChange } from 'element-plus/es/components/tree/src/model/util.mjs';
import { getCurrentInstance, nextTick } from 'vue';


export default {
  data(){
    return{
      currentFocusPage:1,
      currentFollowsPage:1,
      proxy: getCurrentInstance().proxy,
      focusColumns:[{
        label: "用户名称",
        prop: "username",
      },
      {
        label: "操作",
        prop: "opration",
        width:200,
        scopedSlots: "opration",
      }],
      followColumns:[{
        label:"用户名称",
        prop:"username",
      }],
      focusData: {
        list :[]
      },
      followsData:{
        list:[]
      },
      focusOptions: {
        border:true,
        extHeight:10
      },
      followOptions: {
        border:true,
        extHeight:10
      },
    };
  },
  methods: {
    //加载表单数据
    async loadFocusList(){
      try {
        let result = await this.proxy.Request({
          url: "/focus/currentUser",
          method: "GET"
        });

        if (!result){
          return;
        }
        this.focusData.list = result.data;
      } catch(error){
        console.error("获取关注数据时出错：",error)
      }
    },

    async loadFollowsList(){
      try {
        let result = await this.proxy.Request({
          url: "/follows/currentUser",
          method: "GET"
        });

        if (!result){
          return;
        }
        this.followsData.list = result.data;
      } catch(error){
        console.error("获取粉丝数据时出错：",error)
      }
    },

    //取消关注
    del(data) {
      this.proxy.Confirm('你确定要取关该用户吗?', async() => {
        let result = await this.proxy.Request({
          url: '/focus/'+data.id,
          method: "DELETE",
          params: {
            id: data.id,
          }
        })
        if (!result) {
          return;
        }
        this.loadFocusList();
      })
    },

    handleFocusPageNoChange(pageNo) {
      this.currentFocusPage = pageNo;
      this.loadFocusList();
    },
    handleFollowsPageNoChange(pageNo) {
      this.currentFollowsPage = pageNo;
      this.loadFollowsList();
    }
  },
  mounted(){
    this.loadFocusList();
    this.loadFollowsList();
    console.log(this.focusData.list)
    console.log(this.followsData.list)
  },
};
</script>

<style lang="scss">
.focusTitle{
  color: aliceblue;
}
.followTitle{
  color: aliceblue;
}
</style>